<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:inline="javascript">
        var context = [[@{/}]];
    </script>

    <script type="text/javascript">
        $("[name='entityProterty']").click(function(){
            var $this = $(this);
            window.open($this.attr("url"),'实体属性','width=1024,height=768');
        });
        $("#dataTable").dataTable( {
            "bProcessing": true,
            "sServerMethod": "POST",
            "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
                oSettings.jqXHR = $.ajax( {
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback,
                    "contentType": "application/json",
                    "data":JSON.stringify({"organId":"123456"})
                } );},
            "sAjaxSource": context + "Role/list?pageSize=30&pageNum=1",
           /* "fnServerParams": function ( aoData ) {
                aoData.push({"organId":"123456"});
            },*/
            "searching": true,//是否显示搜索框
            "aoColumnDefs": [
                { "sName": "角色名称", "aTargets": [ 0 ],"mData":"name" },
                { "sName": "角色类型", "aTargets": [ 1 ],"mData":"type"  },
                { "sName": "所属机构", "aTargets": [ 2 ],"mData":"organId"  },
                { "sName": "操作", "aTargets": [ 3 ],"mData": "download_link",
                    "mRender": function ( data, type, full ) {
                        return '<a>Download</a>';
                    }}
            ],
            "sAjaxDataProp": "entities",
            "oSearch": {"sSearch": ""},
            "oLanguage": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "暂无数据!",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上-页",
                    "sNext": "下一页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });


    </script>
</head>
<body>

<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
            构建项目 <small>数据库表</small>
        </h3>
        <ul class="page-breadcrumb breadcrumb">
            <li class="btn-group">
                <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
							<span>
								Actions
							</span>
                    <i class="fa fa-angle-down"></i>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li>
                        <a href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Another action
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Something else here
                        </a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <a href="#">
                            Separated link
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <i class="fa fa-home"></i>
                <a href="index.html" tppabs="http://www.keenthemes.com/preview/metronic_admin/index.html">
                    主页
                </a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">
                    构建项目
                </a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">
                    数据表
                </a>
            </li>
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
</div>


<div class="portlet-body">
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-advance table-hover" id="dataTable">
            <thead>
            <tr>
                                    <th>主键</th>
                                    <th>角色名称</th>
                                    <th>角色类型</th>
                                    <th>所属机构</th>
                                    <th>操作</th>
                            </tr>
            </thead>
        </table>
    </div>
</div>


<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Modal Title</h4>
            </div>
            <div class="modal-body">
                <div class="portlet-body form">
                    <!-- BEGIN FORM-->
                    <form action="#" class="horizontal-form">
                        <div class="form-body">
                            <div class="form-group">
                                    <label class="control-label col-md-3">主键</label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="id" class="form-control"/>
                                    </div>
                            </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3">角色名称</label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="name" class="form-control"/>
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3">角色类型</label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="type" class="form-control"/>
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3">所属机构</label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="organId" class="form-control"/>
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3"></label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="createBy" class="form-control"/>
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3"></label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="updateBy" class="form-control"/>
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3"></label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="createDate" class="form-control"/>
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3"></label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="updateDate" class="form-control"/>
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3"></label>
                                    <div class="col-md-9">
                                        <input type="text" placeholder="small" name="remark" class="form-control"/>
                                    </div>
                                </div>
                                                    <div class="form-actions right">
                            <button type="button" class="btn default">Cancel</button>
                            <button type="submit" class="btn blue"><i class="fa fa-check"></i> Save</button>
                        </div>
                        </div>
                    </form>
                    <!-- END FORM-->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="button" class="btn blue">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

</body>
</html>